import React, { useEffect, useState } from 'react';
import './Table.less';
export default function Table({ data, columns, isNow }) {
  // const [isNow, setIsNow] = useState(false);

  const [indexList, setIndexList] = useState([]);

  useEffect(() => {
    let arr = [];
    for (let key in data[0]) {
      if (key !== 'key') {
        arr = arr.concat([key]);
      }
    }
    setIndexList(arr);
  }, []);

  return (
    <div className="tableContainer">
      <table className="tables">
        <thead style={{ backgroundColor: '#fafafa' }}>
          <tr className="column">
            {columns.map((item) => (
              <th key={item.dataIndex}>
                <span style={{ paddingRight: '10px', color: '#ccc' }}>|</span>
                <span>{item.title}</span>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((item) => (
            <tr key={item.key} className="row">
              <td>
                <input
                  className={isNow ? '' : 'table-choose'}
                  type="checkbox"
                  // onChange={(e) => checkItem(e, item)}
                  // disabled={item.disabled}
                />
              </td>
              {indexList.map((child, index) => (
                <td key={`${item.key}-${index}`}>{item[child]}</td>
              ))}
              <td>{columns.map((col) => col.render && col.render(item))}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
Table.defaultProps = {
  isNow: false,
};
